<template>
	<view class="page">
		<comHead :datas="datasObj">
			<template #headerContent>
				<view class="tab_model pd-30" style="height: 132rpx;">
					<!-- <u-subsection style="width: 50%;" :list="tabList" mode="subsection" activeColor="#DBF046" :current="1"></u-subsection> -->
					<view class="subsection bd-r20 mr-20 c-66" v-for="sub in tabList" :key="sub.key"
						:class="sub.key == activsub ? 'subsection_active' : ''" @click="changeSub(sub)">{{ sub.name }}
					</view>
				</view>
			</template>
		</comHead>
		<!-- list -->
		<view class="list">
			<comLoadMord v-if="Object.keys(benefitShareList).length" :dataList='benefitShareList' :pageInfo='pageInfo'
				@getDatas="getShareReduceListFun">

				<view v-for="list in shareList" :key="list.id" class="list_model" id="ListModel">
					<view class="top" @click="goToBack('immigration/immigration?id=' + list.id)">
						<view class="left">
							<image class="imgs bd-r40" :src="list.cover" mode="aspectFill">
							</image>
						</view>
						<view class="right">
							<view class="title_model">
								<view class="label label1 ft-20 flex-center" v-for="label in list.recommends_show">{{
									label }}
								</view>
								<text class="text ft-32 ft1">{{ list.name }}</text>

							</view>
							<view class="money ft-20 mt-8">{{ list.currency_symbol || '' }}<span class="ft-36 ft-num">{{
								list.bc_price_show }}</span>{{ list.bc_price_unit }}</view>
							<view class="option_model flex-bwt mt-36">
								<view class="leftM">
									<view>{{ list.stage_num }}/{{ list.total_stage_num }}人</view>

									<text class="ft-22 c-66">{{ list.stage_txt }}</text>
									<view class="flex mt-12">
										<view class="leftM_child1 ft-24 c-ff pd-10 bd-r8">已获</view>
										<view class="leftM_child2 ft-24 c-33 pd-10 bd-r8"> ￥{{ list.reduce_money
										}}减免
										</view>
									</view>
								</view>
								<view class="rightM c-ff bd-r20 mr-10" :class="activsub != 1 ? 'rightM-active' : ''">

									<span v-if="activsub == 1">去使用</span>
									<span v-else-if="activsub == 2">已使用</span>
									<span v-else>已过期</span>
								</view>
							</view>
						</view>
					</view>
					<view class="bot-f">

						<view class="bottom flex bd-r20">

							<view v-for="(item, index) in list.stages" :key="index" class="bot_model pos-re"
								:style="{ width: list.botModelWindth + 'rpx' }">
								<u-line-progress :percentage="item.percentage" activeColor="#DBF046" height="6">

									<text class="u-percentage-slot"></text>
								</u-line-progress>

								<view class="titleM pos-ab flex-c-center">
									<image @click="goBack" class="imgs" v-if="list.stage_num >= item.num"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon4.png">
									</image>
									<image @click="goBack" class="imgs" v-else
										src="https://cdn.oss.bon-top.cn/static_bc/images/lock-icon.png">
									</image>

									<text class="fw-800" v-if="item.is_get">已获{{ item.reduce }}元</text>
									<text class="fw-800" v-else>{{ item.reduce }}元</text>
								</view>
							</view>

						</view>
					</view>
					<view class="ft-22 c-99 bot-tips" v-if="list.is_get">{{ list.end_time_txt }}</view>
				</view>
			</comLoadMord>
		</view>


	</view>


</template>
<script setup lang="js">
import {
	ref,
	reactive,
	onMounted,
	nextTick
} from "vue";
import {
	utils
} from "@/utils/utils.js";
import {
	api
} from "@/utils/api.js";
import comLoadMord from '@/components/comLoadMord.vue'

import comHead from '@/components/comHead.vue';
let datasObj = reactive({
	title: '我的减免',
	img: '',
	color: '#FFFFFF',
	direction: '',
	scrollTop: 0,
	noBack: false,
	height: 220
})

const tabList = reactive([{
	name: '未使用',
	key: 1
},
{
	name: '已使用',
	key: 2
},
{
	name: '已过期',
	key: 3
},
])
let activsub = ref(1)
onMounted(() => {
	getShareReduceListFun()

})
let pageInfo = reactive({
	currentPage: 1,
	pageSize: 10
})
// 点击顶部的选项时触发
const changeSub = (item) => {
	if (item.key == activsub.value) return
	shareList.value = []
	activsub.value = item.key
	uni.showLoading({
		title: '加载中'
	});
	getShareReduceListFun()
}
// 返回键
const goBack = () => {
	uni.navigateBack(-1)
}
// 对应跳转
const goToBack = (url) => {
	uni.navigateTo({
		url: '/subpackage/' + url
	})
}
//获取分享减免列表
const shareList = ref([])
let benefitShareList = ref({})
const getShareReduceListFun = () => {
	console.log('shuj====>', pageInfo)
	utils
		.request(
			api.getShareReduceList, {
			page: 1,
			pageSize: 10,
			type: activsub.value,
			app_id: utils.app_id,
			identity: utils.identity,
		},
			"get"
		)
		.then((res) => {
			uni.hideLoading();
			benefitShareList.value = res.data
			shareList.value = [...shareList.value, ...benefitShareList.value.items]
			benefitShareList.value.listIsShow = true
			benefitShareList.value.listIsShow = shareList.value.length > 0
			nextTick(() => {
				const query = uni.createSelectorQuery();
				// 选择元素
				query.select('#ListModel').fields({
					size: true
				}, (res) => {
					const width = res.width || 0;
					if (!width) return
					console.log('元素', res)
					// 处理渲染列表
					shareList.value.forEach((item) => {
						item['botModelWindth'] = (width / item.stages.length) * 2
						item['botModelProgWindth'] = (item['botModelWindth'] / 2) - (
							130 / 2)
						item.stages.forEach((sta, index) => {
							let _num = (item.stage_num / sta.num) * 100
							// 处理第一个值
							if (index == 0) {
								sta.percentage = item.stage_num == 0 ? 0 : _num >
									100 ? 100 : _num

							} else {
								// 上一个数据
								let lastChild = item.stages[index - 1]
								if (lastChild.percentage == 100) {
									// 如果上一个数据已完成 并且第二个任务完成一部分
									if (item.stage_num - lastChild.num > 0) {
										sta.percentage = item.stage_num == 0 ? 0 : _num >
											100 ? 100 : _num
									} else {
										sta.percentage = 0
									}
								} else {
									sta.percentage = 0

								}
							}
						})
						item['is_get'] = item.stages.some(e => e.is_get)
					})

				}).exec();


			})



		});
};
</script>

<style lang="scss" scoped>
.page {
	border-top: 2rpx solid #F1F1F1;
}

.tab_model {
	display: flex;


	.subsection {
		background-color: #F8F8F8;
		width: 124rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;

	}

	.subsection_active {
		background-color: #DBF046;
		color: #333;
	}
}

.list {
	padding-bottom: 20rpx;

	.list_model {
		margin: 0 30rpx;
		margin-top: 30rpx;
		border-radius: 40rpx;
		border: 2rpx solid #F1F1F1;
		background-color: #fff;

		.top {
			display: flex;
			align-items: center;

			.left {
				margin: 20rpx;

				.imgs {
					width: 222rpx;
					height: 274rpx;
				}
			}

			.right {
				flex: 1;
				// background-color: red;
				width: 100rpx;

				.title_model {
					display: flex;
					align-items: center;

					.label {
						border-radius: 8rpx;
						padding: 0 4rpx;
						display: inline-block;
						line-height: 36rpx;
						box-sizing: border-box;
						height: 36rpx;
						margin-right: 4rpx;
						color: #333333;
						background: linear-gradient(to right, #DBF046, #FFEE7E);

					}

					.text {
						width: 50%;
						/* 显示省略符号来代表被修剪的文本 */
						text-overflow: ellipsis;
						/* 防止文本换行 */
						white-space: nowrap;
						/* 隐藏溢出的内容 */
						overflow: hidden;
						margin-left: 10rpx;

					}



				}

				.option_model {
					width: 100%;

					.leftM {
						display: flex;
						flex-direction: column;

						.leftM_child1 {
							background-color: #333;

						}

						.leftM_child2 {
							background: linear-gradient(to right, #DBF046, #FFEE7E);

						}
					}

					.rightM {
						width: 124rpx;
						height: 78rpx;
						line-height: 78rpx;
						text-align: center;
						background-color: #333;

					}

					.rightM-active {
						background-color: #F1F1F1;
						color: #999;
					}
				}
			}
		}

		.bot-f {
			padding: 20rpx;

			.bottom {
				background-color: #FBFFDF;
				padding: 20rpx;
				height: 78rpx;


				.bot_model {
					// height: 118rpx;
					height: 100%;
					margin-top: 26rpx;

					.imgs {
						width: 30rpx;
						height: 30rpx;
					}
				}

				.titleM {
					top: -8rpx;
					width: 100%;
					white-space: nowrap;
				}

			}
		}

		.bot-tips {
			text-align: center;
			width: 100%;
			// height: 52rpx;
			// line-height: 52rpx;
			margin: 20rpx 0;
		}

	}
}
</style>